<template>
	<div class="concat">
		<div class="head">
			<div class="demand" @click="resetDialog(1)">
				<div :class="{ active: isActive }">需求留言</div>
			</div>
			<div class="solution" @click="resetDialog(0)">
				<div :class="{ active: !isActive }">方案留言</div>
			</div>
		</div>
		<scroll-view lower-threshold="50" scroll-y="true" class="scroll-view" @scrolltolower="getPage">
			<view class="item" v-for="item in dialogList" @click="goConcat(item.id)">
				<div class="theme">
					{{ item.msg }}
				</div>
				<div class="time">{{ item.createTime }}</div>
			</view>
		</scroll-view>
	</div>
</template>

<script>
import { getDialogList } from '../../api/dialog/dialog';
export default {
	data() {
		return {
			isActive: true,
			pageNum: 1,
			dialogList: [],
			timer: null,
			type: 0,
			total: 0
		};
	},
	created() {
		this.getDialog();
	},
	methods: {
		async resetDialog(type) {
			if (type === 1) {
				this.isActive = true;
			} else {
				this.isActive = false;
			}
			this.type = type;
			this.pageNum = 1;
			this.dialogList = [];
			this.getDialog();
		},
		async getDialog() {
			const { rows, total } = await getDialogList({ pageNum: this.pageNum, pageSize: 10, type: this.type });
			this.dialogList = this.dialogList.concat(rows);
			this.total = total;
		},
		getPage() {
			if (this.timer !== null || this.dialogList.length >= this.total) return;
			this.timer = setTimeout(() => {
				this.pageNum += 1;
				this.getDialog();
				clearTimeout(this.timer);
				this.timer = null;
			}, 500);
		},
		goConcat(id){
			uni.navigateTo({
				url:`/pages/concat/concat?id=${id}`
			})
		}
	}
};
</script>

<style lang="less" scoped>
.concat {
	.head {
		background-color: #d3d3d3;
		height: 80rpx;
		display: flex;
		.demand,
		.solution {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			padding: 0 30rpx;
			margin-left: 30rpx;
		}
		.active {
			font-size: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			width: 200rpx;
			text-align: center;
			border-bottom: 2px solid black;
		}
	}
	.scroll-view {
		margin-top: 20rpx;
		height: calc(100vh - 100rpx);
		padding: 20rpx 30rpx;

		.item {
			height: 200rpx;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.theme {
				height: 120rpx;
				line-height: 40rpx;
				text-indent: 2em;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3; /* 设置为3行 */
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal; /* 允许换行 */
				word-break: break-all; /* 强制单词断开以适应容器 */
			}
			.time {
				line-height: 60rpx;
				padding-right: 40rpx;
				text-align: right;
				font-size: 20rpx;
			}
		}
	}
}
</style>
